<template>
  <el-row>
    <el-card shadow="hover" :body-style="{ padding: '1px' }">
      <el-image
        style="width: 100px; height: 100px"
        :src="item.picture"
      ></el-image>

      <div>
        <div>
          <p class="goodName">{{ item.name }}</p>
          <el-row :gutter="10">
            <p class="info">
              <el-col :span="10">
                <span class="small">￥</span>
                <span class="price">{{ item.price }}</span>
              </el-col>
              <el-col :span="10">
                <el-input-number
                  class="number"
                  v-model="item.commodityNum"
                  controls-position="right"
                  :min="1"
                  :max="100"
                ></el-input-number>
            
              </el-col>
              <el-col :span="4">
                <span>{{querityFormat(item.qualityUnit)}}</span>
              </el-col>
            </p>
          </el-row>
          <el-row :gutter="1">
            <el-col :span="12">
              <el-button type="success" @click="addGood(item)"
                >加入购物车</el-button
              >
            </el-col>

            <el-col :span="12">
              <el-button type="danger" @click="buy(item)">立即购买</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </el-row>
</template>

<script>
import { nanoid } from "nanoid";
import { toAliPay } from "@/api/supermarket/order";
export default {
  name: "GoodCard",
  dicts: ['commodity_quality_unit'],
  props: ["item", "addCommodity","submitForm"],
  data() {
    return {
      num: 1,
      url: "",
      // 新窗口的引用
      newWin: null,

        // 购物车提交后台数据
        trade: {
        number:undefined,
        statusIntegral: "1",
        body: undefined,
        subject: undefined,
        totalAmount: 0,
        supermarketId: undefined,
        commodityList: [],
        orderNum: 0,
      },
    };
  },
  watch: {
    url(newVal, oldVal) {
      if (newVal && this.newWin) {
        this.newWin.sessionStorage.clear();
        this.newWin.location.href = newVal;
        // 重定向后把url和newWin重置
        this.url = "";
        this.newWin = null;
      }
    }
  },
  methods: {
    //保存商品到购物车
    addGood(item) {
      console.log(item);
      const goods = {
        uuid: nanoid(),
        name: item.name,
        price: item.price,
        qualityUnit: item.qualityUnit,
        commodityNum: item.commodityNum,
        picture: item.picture,
        id: item.id,
        supermarketId: item.supermarketId,
      };
      this.addCommodity(goods);
      this.$modal.msgSuccess("添加购物车成功");
    },


    querityFormat(qualityUnit) {
   return this.selectDictLabel(this.dict.type.commodity_quality_unit, qualityUnit);
},
    // 立即购买
    buy(item) {

      const cart = [{
        name: item.name,
        price: item.price,
        commodityNum: item.commodityNum,
        picture: item.picture,
        id: item.id,
        supermarketId: item.supermarketId,
      }];
      this.trade.commodityList = cart;
      this.trade.orderNum = 1;
      this.trade.totalAmount = item.price*item.commodityNum;
      this.trade.subject = item.name;
      this.trade.supermarketId = item.supermarketId;
      this.trade.body = item.name;
      this.submitForm(this.trade)
    //  this.submitForm();
    },

    /** 提交按钮 */
    // submitForm: function () {
    //   this.loading = true;
    //   // 先打开一个空的新窗口，再请求
    //   this.newWin = window.open();
    //   let url = "";
    //   if (/(Android)/i.test(navigator.userAgent)) {
    //     // 判断是否为Android手机
    //     url = "toPayAsWeb";
    //   } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
    //     // 判断是否为苹果手机
    //     url = "toPayAsWeb";
    //   } else {
    //     url = "toPayAsPC";
    //   }
    //   toAliPay(url, this.trade)
    //     .then((res) => {
    //       this.loading = false;
    //       this.url = res;
    //     })
    //     .catch((err) => {
    //       this.loading = false;
    //       console.log(err.response.data.message);
    //     });
    // },
  },
}
</script>

<style>
.el-card {
  width: 200px;
  height: 260px;
  display: inline-block;
  margin-top: 10px;
  margin-left: 4px;
  margin-right: 4px;
  /* position: relative;
  right: 280px; */
}

.price {
  text-align: right;
  color: red;
  font-size: larger;
  position: relative;
  right: 10px;
}

.small {
  color: red;
  font-size: smaller;
  position: relative;
  right: 10px;
}
.goodName {
  position: relative;
  right: 50px;
  height: 20px;
  width: 200px;
  overflow: hidden;
}

.number {
  position: relative;
  width: 90px;
  height: 50px;
}
</style>